<?php 
include('common.php');
session_start();

if(isset($_GET['selected_categories'])){
    // when the user submits their selection, save it to session and redirect to enroll.php
    $selected_categories = explode(':',$_GET['selected_categories']);
    $_SESSION['selected_categories'] = serialize($selected_categories); 
    session_write_close();
    header('Location:enroll.php');
} 

// load all the categories for the user to select from
$es = $vs->get_service('enrollment');
$categories = $es->get_category();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>VidoopSecure Demo - ImageShield Category Selection</title>
        <link rel="stylesheet" href="css/base.css" type="text/css" media="all">
    </head>
    <body id="select">
        <div id="container">
            <div id="header">
                <a class="logo" href="enroll.php"></a>
                <h1>MySite Category Selection</h1>
            </div>
            <div id="content">
                <div id="description">Select 2 categories: </div>
                <div id="selection">
                    <div id="category_list">
                        <div class="pagination">
                            <a class="back" href="#">&lt; Back</a>
                            <a class="more" href="#">More categories...</a>
                        </div>
                        <div id="category_container">
                            <div id="category_images">
                                <? foreach($categories as $category) { ?>
                                <div class="category_image_wrapper">
                                    <a id="<?=$category->id?>" class="category_image" href="#">
                                        <img alt="<?=$category->name;?>" src="<?=$category->images[0]->uri?>">
                                        <span class="category_label"><?=$category->name?></span>
                                    </a>
                                </div>
                                <? } ?>
                            </div>
                        </div>
                        <div class="pagination">
                            <a class="back" href="#">&lt; Back</a>
                            <a class="more" href="#">More categories...</a>
                        </div>
                    </div>
                    <div id="category_selected">
                        <h2>My Categories:</h2>
                        <div id="progress_count">
                            [<span id="selected_count">0</span>
                            of <span id="total_count">2</span>
                            selected]
                            <a id="clear_selected" href="#">Clear selected</a>
                        </div>
                        <ol></ol>
                        <div>
                            <a id="selection_done" class="disabled" href="#">I'm done selecting categories</a>
                        </div>
                    </div>
                </div>
            </div>
            <div id="footer">&copy;<?= date('Y');?> VidoopSecure</div>
        </div>
        <script type="text/javascript">
            <?= "var categories = " . json_encode($categories) . "; \n"?>
        </script>
        <script type="text/javascript" src="js/jquery-1.3.min.js"></script>
        <script type="text/javascript" src="js/selection.js"></script>
    </body>
</html>
